import React,{useState} from "react";
import {EditOutlined} from  '@ant-design/icons'
import {Modal,Button, Form, Input, Select, message } from 'antd'
import { useCallback } from "react";
import request from "@/utils/request";

function ChangeItem(props) {
    const [isModalVisible, setIsModalVisible] = useState(false);
    // const [changeData] = props.changeData
    const formData = props.changeData;
    const showModal = () => {
      setIsModalVisible(true);
    };
  
    const handleOk = () => {
      setIsModalVisible(false);
    };
  
    const handleCancel = () => {
      setIsModalVisible(false);
    };
    const layout = {
      labelCol: {
        span: 8,
      },
      wrapperCol: {
        span: 16,
      },
    };
    
    //点击提交发起请求修改学生信息
    const onFinish = useCallback(async (values) => {
      const {data} = await request.put(`/user/${formData._id}`,{
        ...values
      })
      if(data.code === 201){  
        console.log(data.data)
        props.newList()
        setIsModalVisible(false)
        message.success('修改成功！')
      }
    },[])
    return(
        <>
            <a style={{color:'#1890ff',fontSize:12}} onClick={showModal} ><EditOutlined style={{color:'#1890ff'}} />编辑</a>
            <Modal title="编辑学生信息" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} footer={null}>
            <Form {...layout} name="nest-messages"  onFinish={onFinish} initialValues={{...formData}} >
                <Form.Item
                    name='username'
                    label="姓名"
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                  >
                    <Input/>
                  </Form.Item>
                  <Form.Item
                    name='class_id'
                    label="班级"
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item
                    name='gender'
                    label="性别"
                  >
                    <Select>
                      <Select.Option value="男">男</Select.Option>
                      <Select.Option value="女">女</Select.Option>
                    </Select>
                  </Form.Item>
                  <Form.Item
                    name='email'
                    label="邮箱"
                    rules={[
                      {
                        type: 'email',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item
                    name='phone'
                    label="电话号码"
                    
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item
                    name='birthday'
                    label="生日"
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item name='suspension' label="是否休学状态">
                    <Input />
                  </Form.Item>
                  <Form.Item name='remark' label="备注信息">
                    <Input.TextArea />
                  </Form.Item>
                  <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
                    <Button type="primary" htmlType="submit">
                      提交修改
                    </Button>
                  </Form.Item>
              </Form>
            </Modal>
        </>
    )
}

export default ChangeItem